<template>
<div class="row-main" style="display:flex;'justify-content: center;align-items: center">
  <el-card class="box-card" style="width: 700px;">
    <div slot="header" class="clearfix">
      <span>账户信息</span>
      <el-button type="shenda" icon="el-icon-back" size="small" @click="toBack" style="float: right;">返回</el-button>
    </div>
    <div :style="{'overflow-x':$store.state.app.screenWidth<800?'scroll':'auto'}">
      <el-form label-width="150px">
        <el-form-item label="登录账号" >
          <el-input size="small" v-model="loginName" :disabled="id != 0" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" >
          <el-input size="small" v-model="agentName" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="客户类型" >
          <el-select v-model="dictAgentTypeSearch" placeholder="请选择" size="small" :disabled="id!=0"style="width: 200px">
            <el-option v-for="dictAgentType in dictAgentTypeSelect" :key="dictAgentType.value" :label="dictAgentType.label" :value="dictAgentType.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="sale" label="业务员" >
          <el-select v-model="employeeForForm" placeholder="请选择" style="width: 200px" size="small">
            <el-option v-for="employee in employeeForSelect"
                       :key="employee.value"
                       :label="employee.label"
                       :value="employee.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" >
          <el-input size="small" v-model="telephone" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" >
          <el-input size="small" v-model="email" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="支付宝账户" >
          <el-input size="small" v-model="alipayLoginName" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="支付宝户名" >
          <el-input size="small" v-model="alipayName" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="客户地址" >
          <el-input type="textarea" size="small" v-model="address" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="认证类型" >
          <el-radio v-model="regType" label="1" @change="checkRegType(value)">个人认证</el-radio>
          <el-radio v-model="regType" label="2" @change="checkRegType(value)">企业认证</el-radio>
        </el-form-item>
        <el-form-item label="身份证正面" prop="idPictureFront" v-show="operation.pictureFrontDisplay">
          <el-upload class="upload-demo" :action="upload_qiniu_url" :data="qiniuData" :show-file-list="false" v-show="operation.pictureFrontDisplay" :on-success="handleAvatarSuccess" :on-error="handleError" :before-upload="beforeFrontUpload" ref="file" accept="image/*" drag multiple @change="uptype=1">
            <img class="avatar" v-if="certificatesOne" :src="certificatesOne" ><i class="el-icon-upload" v-if="!certificatesOne"></i>
            <div class="el-upload__text">将身份证正面拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证反面" prop="idPictureBack" v-show="operation.pictureBackDisplay">
          <el-upload class="upload-demo" :action="upload_qiniu_url" :data="qiniuData" :show-file-list="false" v-show="operation.pictureBackDisplay" :on-success="handleAvatarSuccess" :on-error="handleError" :before-upload="beforeBackUpload" ref="file" accept="image/*" drag multiple @change="uptype=2">
            <img class="avatar" v-if="certificatesTwo" :src="certificatesTwo" ><i class="el-icon-upload" v-if="!certificatesTwo"></i>
            <div class="el-upload__text">将身份证反面拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="手持身份证" prop="pictureInHandDisplay" v-show="operation.pictureInHandDisplay">
          <el-upload class="upload-demo" :action="upload_qiniu_url" :data="qiniuData" :show-file-list="false" v-show="operation.pictureBackDisplay" :on-success="handleAvatarSuccess" :on-error="handleError" :before-upload="beforeHandUpload" ref="file" accept="image/*" drag multiple @change="uptype=2">
            <img class="avatar" v-if="certificatesFour" :src="certificatesFour" ><i class="el-icon-upload" v-if="!certificatesFour"></i>
            <div class="el-upload__text">将手持身份证拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="营业执照" prop="idPictureThree" v-show="operation.pictureThreeDisplay">
          <el-upload class="upload-demo" :action="upload_qiniu_url" :data="qiniuData" :show-file-list="false" v-show="operation.pictureThreeDisplay" :on-success="handleAvatarSuccess" :on-error="handleError" :before-upload="beforeThreeUpload" ref="file" accept="image/*" drag multiple @change="uptype=3">
            <img class="avatar" v-if="certificatesThree" :src="certificatesThree" ><i class="el-icon-upload" v-if="!certificatesThree"></i>
            <div class="el-upload__text">将营业执照拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div style="width: 100%;height: 80px;display: flex;justify-content: center;align-items: center">
      <el-button size="small" type="primary" @click="save" v-preventReClick>提交</el-button>
    </div>
  </el-card>
</div>
</template>

<script>
  import {initEmployeeSelect, uploadUserPicture, save, getUser, getUserType, uploadNoticePicture} from '@/api/getData'
  import {message} from "../../../authConfig";

  var qiniu = require('qiniu-js')
  var imgUrl = localStorage.getItem('image')
  export default {
    name: 'Edit',
    data() {
      return {
        id: "",
        regType: "1",
        loginName: "",
        agentName: "",
        telephone: "",
        email: "",
        alipayLoginName: "",
        alipayName: "",
        address: "",
        uptype: 0,
        upload_qiniu_addr: imgUrl,
        upload_qiniu_url: 'https://upload.qbox.me',
        certificatesOne: "",
        certificatesTwo: "",
        certificatesThree: "",
        certificatesFour: "",
        qiniuData: {},
        employeeForForm: "",
        employeeForSelect: [],
        dictAgentTypeSearch: "",
        loading: false,
        dictAgentTypeSelect: [],
        idPictureFront: [],
        idPictureBack: [],

        fileList: [
          // {name: '正面', url: 'http://img5.imgtn.bdimg.com/it/u=4075680052,587526839&fm=26&gp=0.jpg'},
          // {name: '反面', url: 'http://img5.imgtn.bdimg.com/it/u=4075680052,587526839&fm=26&gp=0.jpg'}
        ],
        operation: {
          pictureFrontDisplay: true,
          pictureBackDisplay: true,
          pictureInHandDisplay: true,
          pictureThreeDisplay: false
        },
        pagekey: '',
      }
    },
    async created() {
      let b = await getUserType();
      if (b._result) {
          for(let a in b.data){
          let obj = {};
          obj.label = b.data[a];
          obj.value= a;
          this.dictAgentTypeSelect.push(obj)
        }
        this.pagekey = await await this.$getPageKey();
      }
      this.id = this.$route.params.id;
      await this.initEmployeeSelect();
      if (this.id != 0) {
        await this.getUser()
      }
    },
    methods: {
      checkRegType(value) {
        if (this.regType == 1) {
          this.operation.pictureFrontDisplay = true
          this.operation.pictureBackDisplay = true
          this.operation.pictureInHandDisplay = true
          this.operation.pictureThreeDisplay = false
        } else {
          this.operation.pictureFrontDisplay = false
          this.operation.pictureBackDisplay = false
          this.operation.pictureInHandDisplay = false
          this.operation.pictureThreeDisplay = true
        }
      },
      async initEmployeeSelect() {
        const returnData = await initEmployeeSelect({});
        this.employeeForSelect = [];
        if (returnData._result) {
          for (let item of returnData.data) {
            const obj = {};
            obj.value = item.id;
            obj.label = item.employeeName;
            this.employeeForSelect.push(obj)
          }
          this.employeeForForm = this.employeeForSelect&&this.employeeForSelect.length>0?this.employeeForSelect[0].value:[];
        }
      },
      checkFile(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG && !isPNG) {
          this.$message.error('图片只能是 JPG/PNG 格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('图片大小不能超过 2MB!')
          return false
        }
        return true
      },
      handleAvatarSuccess: function (res, file) {
        let url = this.upload_qiniu_addr + res.key
        if (this.uptype == 1) {
          this.certificatesOne = url
        }
        if (this.uptype == 2) {
          this.certificatesTwo = url
        }
        if (this.uptype == 3) {
          this.certificatesThree = url
        }
        if (this.uptype == 4) {
          this.certificatesFour = url
        }
      },
      handleError: function (res) {
        this.$message({
          message: '上传失败',
          duration: 2000,
          type: 'warning'
        })
      },
      async beforeFrontUpload(file) {
        // this.qiniuData.key = file.name;
        if (!this.checkFile(file)) {
          return false
        }
        let tk = await uploadNoticePicture({id: this.id})
        this.qiniuData = tk.data
        this.uptype = 1
      },
      async beforeBackUpload(file) {
        // this.qiniuData.key = file.name;
        if (!this.checkFile(file)) {
          return false
        }
        let tk = await uploadUserPicture({uploadType: 2})
        this.qiniuData = tk.data
        this.uptype = 2
      },
      async beforeHandUpload(file) {
        // this.qiniuData.key = file.name;
        if (!this.checkFile(file)) {
          return false
        }
        let tk = await uploadUserPicture({uploadType: 4})
        this.qiniuData = tk.data
        this.uptype = 4
      },
      async beforeThreeUpload(file) {
        // this.qiniuData.key = file.name;
        if (!this.checkFile(file)) {
          return false
        }
        let tk = await uploadUserPicture({uploadType: 3})
        this.qiniuData = tk.data
        this.uptype = 3
      },
      //获取pageKey
      async getPageKey(){
        this.pagekey = await this.$getPageKey();
      },
      async save() {
        if(this.loginName == ""){
            this.$message({message: '请填写登录账号', type: 'error'})
            return
        }
        let pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&—|{}【】‘；：”“'。，、？]");
        if(pattern.test(this.loginName)){
          this.$message({message: '登录账号不能输入特殊字符', type: 'error'});
          return false;
        }
        if(this.agentName == ""){
            this.$message({message: '请填写客户姓名', type: 'error'})
            return
        }
        if(this.dictAgentTypeSearch == ""){
            this.$message({message: '请填写客户类型', type: 'error'})
            return
        }
        if(this.telephone == ""){
            this.$message({message: '请填写客户联系方式', type: 'error'})
            return
        }
        if(this.alipayLoginName == ""){
            this.$message({message: '请填写客户支付宝账号', type: 'error'})
            return
        }
        this.loading = true;
        let address = this.address;
        if(!address)address = ' ';
        const returnData = await save({
          id: this.id,
          loginName: this.loginName,//登录账号
          agentName: this.agentName,//客户姓名
          dictAgentType: this.dictAgentTypeSearch,//客户类型
          employeeId: this.employeeForForm,//业务员
          telephone: this.telephone,//联系电话
          email: this.email,//用户邮箱
          alipayLoginName: this.alipayLoginName,//支付宝账户
          alipayName: this.alipayName,//支付宝户名
          address: address,//客户地址
          certificatesOne: this.certificatesOne,//身份证正面
          certificatesTwo: this.certificatesTwo,//身份证反面
          certificatesThree: this.certificatesThree,//营业执照
          certificatesFour: this.certificatesFour,//手持身份证

        },{
          pagekey: this.pagekey
        });
        if (returnData._result) {
          this.$message({message: '操作成功', type: 'success'})
          this.$router.push({path: '/user/index'})
        }
        else{
          this.getPageKey();
        }

      },
      async getUser() {
        const returnData = await getUser({
          id: this.id
        })
        if (returnData._result) {
          if (returnData.data != null) {
            this.id = returnData.data.id;
            this.loginName = returnData.data.loginName;
            this.agentName = returnData.data.agentName;
            this.employeeForForm = returnData.data.employeeId?returnData.data.employeeId:this.employeeForForm;
            this.telephone = returnData.data.telephone;
            this.email = returnData.data.email;
            this.alipayLoginName = returnData.data.alipayLoginName;
            this.alipayName = returnData.data.alipayName;
            this.address = returnData.data.address;
            this.dictAgentTypeSearch=returnData.data.dictAgentType;
            if(returnData.data.dictAgentType=='COMPANY_CUSTOMER'){
              this.regType = "2"
            }
            else{
              this.regType = "1"
            }
            // if (returnData.data.certificatesOne != null && returnData.data.certificatesTwo != null) {
            //   this.regType = "1"
            // }
            // if (returnData.data.certificatesThree != null) {
            //   this.regType = "2"
            // }
            this.certificatesOne = returnData.data.certificatesOne
            this.certificatesTwo = returnData.data.certificatesTwo
            this.certificatesThree = returnData.data.certificatesThree
            this.checkRegType()
          }
        }

      },
      toBack() {
        this.$router.back(-1);
      }
    }
  }
</script>
<style scoped>
.avatar{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>
<style scoped lang="scss">
  .div {
    margin-top: 5vh;
  }

  .el-main {
    .el-form {
      .button /deep/ .el-col {
        display: flex;
        justify-content: flex-start;
      }

      .box /deep/ label {
        text-align: left;
      }

      .sale /deep/ label {
        letter-spacing: 7px;
      }
    }
  }

  .el-popper[x-placement^=top] {
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;
    margin-right: -39px;

    button {
      display: block;
    }

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
</style>
